<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日历</title>
    <script type="text/javascript" src="../easyui-config.js"></script>
</head>
<body>
    <div class="icon-search md" style="width:60px;">15</div>
    <style scoped="scoped">
        .md {
            height: 16px;
            line-height: 16px;
            background-position: 2px center;
            text-align: right;
            font-weight: bold;
            padding: 0 2px;
            color: red;
        }
    </style>

    <div class="easyui-linkbutton" onclick="showOptions();">显示options</div>
    <div class="easyui-linkbutton" onclick="resize();">resize</div>
    <div class="easyui-linkbutton" onclick="moveTo();">跳转日期(moveTo)</div>
    <script>
        function showOptions() {
            let options = $('#cc').calendar('options');
            $.messager.tip({
                msg: JSON.stringify(options),
                timeout: 5000,
                icon: 'info',
                height: 80
            });
        }
        function resize() {
            let options = $('#cc').calendar('resize', { width: 500, height: 500 });
            $.messager.tip({
                msg: JSON.stringify(options),
                timeout: 5000,
                icon: 'info'
            });
        }
        function moveTo() {
            let options = $('#cc').calendar('moveTo', new Date(2023, 6, 15));
            $.messager.tip({
                msg: JSON.stringify(options),
                timeout: 5000,
                icon: 'info',
                height:80
            });
        }
    </script>


    <div id="cc" style="width:180px;height:180px;"></div>
    <script>
        $('#cc').calendar({
            current: new Date(2022, 6, 1),
            width: 300,
            height: 300,
            fit: false,
            border: false,
            showWeek: true,/* 显示周次 */
            weekNumberHeader: "周次",/* 周次列名 */
            //getWeekNumber:function(date){ console.log(date); },
            firstDay: 1,/* 第一列显示周几 取值0~6 */
            weeks: [1, 3, 5],/* 要显示的周集合 */
            months: [6],/* 要显示的月份集合 */
            year: 2022,
            month: 6,
            formatter: function (date) {
                return date.getDate();
            },
            styler: function (date) {
                if (date.getDay() == 1) {
                    return 'background-color:#ccc';
                    // the function can return predefined css class and inline style
                    // return {class:'r1', style:{'color:#fff'}};
                } else {
                    return '';
                }
            },
            validator: function (date) {
                return true;
                if (date.getDay() == 1) { return true; }
                else { return false; }
            },
            onSelect: function (date) {
                $.messager.tip({
                    msg: date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(),
                    icon: 'info'
                });
            },
            onChange: function (newDate, oldDate) {
                function getDate(date) {
                    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
                }
                $.messager.tip({
                    msg: '新日期:' + getDate(newDate),
                    icon: 'info'
                });
                $.messager.tip({
                    msg: '旧日期:' + getDate(oldDate),
                    icon: 'info'
                });
            },
            onNavigate: (year, month) => {
                $.messager.tip({
                    msg: '年月变更到:' + year + '-' + month,
                    icon: 'info'
                });
            }
        });
    </script>
</body>
</html>